<!-- 会员类型弹窗 -->
<template>
  <a-modal :maskClosable="false" title="会员职务" centered :width="800" v-model="visible" :afterClose="afterClose">
    <a-form-model :model="form" ref="ruleForm" :rules="rules" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-form-model-item label="职务名称" prop="name">
        <a-input v-model="form.name" placeholder="请输入名称" disabled />
      </a-form-model-item>
      <a-form-model-item label="是否收费" prop="isPremium">
        <a-radio-group v-model="form.isPremium" @change="handleIsPremiumChange">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="0">否</a-radio>
        </a-radio-group>
        <template>
          <a-form-model-item
            label="费用"
            prop="membershipFees"
            :labelCol="{
              xs: { span: 24 },
              sm: { span: 3 },
            }"
          >
            <a-input-number
              v-model="form.membershipFees"
              placeholder="请输入费用"
              :min="0"
              :disabled="membershipFeesDisabled"
              class="width-10"
            />
          </a-form-model-item>
          <a-form-model-item
            label="周期"
            prop="allottedTime"
            :labelCol="{
              xs: { span: 24 },
              sm: { span: 3 },
            }"
          >
            <!-- <div class="disFlx"> -->
            <a-input v-model="form.allottedTime" placeholder="请输入周期" class="width-20" />
            <a-select v-model="unit" class="_ml-10" style="width: 100px" @change="handleUnitChange">
              <a-select-option :value="12">年</a-select-option>
              <a-select-option :value="1">月</a-select-option>
            </a-select>
            <!-- </div> -->
          </a-form-model-item>
        </template>
      </a-form-model-item>
      <!-- <a-form-model-item label="参会证样式" prop="cardId">
        <a-select v-model="form.cardId" placeholder="请选择参会证样式" @change="levelCardChange">
          <a-select-option v-for="(item, index) in level_card_list" :key="index" :value="item.id">{{
            item.name
          }}</a-select-option>
        </a-select>
        <viewer class="viewer" ref="viewer" :images="[form.cardLogo]">
          <img v-if="form.cardLogo" :src="form.cardLogo" alt="" class="viewer-img" />
        </viewer>
      </a-form-model-item> -->
      <a-form-model-item label="是否开放申请">
        <a-switch v-model="form.isShow" @change="changeIsShow" />
      </a-form-model-item>
      <a-form-model-item v-if="form.isShow" label="申请对象" prop="memberTypeList">
        <a-checkbox-group v-model="form.memberTypeList" @change="changeTypeList">
          <a-checkbox :value="1">允许单位申请</a-checkbox>
          <a-checkbox :value="2">允许个人申请</a-checkbox>
        </a-checkbox-group>
      </a-form-model-item>
      <a-form-model-item label="排序" prop="sort">
        <a-input-number v-model="form.sort" :min="0" :max="9999" placeholder="请输入排序" class="min-width-12" />
        <span class="_pl-20">序号越小, 对应职务的会员越靠前</span>
      </a-form-model-item>
      <a-form-model-item label="备注">
        <a-textarea v-model="form.remark" placeholder="请输入职务描述" :rows="4" />
      </a-form-model-item>
    </a-form-model>
    <template slot="footer">
      <a-button type="primary" @click="handleSubmit" :loading="confirmLoading">发布</a-button>
    </template>
  </a-modal>
</template>
<script>
import {
  typeAdd,
  typeEdit,
  deadline,
  memberPostAdd,
  memberPostEdit,
  cardTemplateList,
  levelCardList,
  memberLevelInfo,
  memberPostInfo,
} from '@/api/member/memberType'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'

const initForm = {
  id: undefined,
  name: undefined,
  isPremium: 1,
  membershipFees: undefined,
  allottedTime: undefined,
  cardId: undefined,
  isShow: true,
  memberTypeList: [1, 2],
  sort: undefined,
  remark: undefined,
  nonmember: 0,
  cardLogo: undefined,
  cardJson: undefined,
}

export default {
  props: ['postType'],
  components: {},
  data() {
    let validatorAllottedTime = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入周期'))
      } else if (String(value).indexOf('.') != -1 || value < 1 || value % 1 !== 0) {
        callback(new Error('周期必须为大于0的整数'))
      }
      callback()
    }

    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      unit: 1,
      form: { ...initForm },
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'change' }],
        isPremium: [{ required: true, message: '请选择是否收费', trigger: 'change' }],
        cardId: [{ required: true, message: '请选择参会证样式', trigger: 'change' }],
        membershipFees: [{ required: true, message: '请输入会费', trigger: 'change' }],
        allottedTime: [{ required: true, validator: validatorAllottedTime, trigger: 'change' }],
        memberTypeList: [{ required: true, message: '请选择限制申请对象', trigger: 'change' }],
        sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
      },
      type: '',
      headers: {
        token: Vue.ls.get(ACCESS_TOKEN),
      },
      id: undefined,
      level_card_list: [],
      // params: {
      //   businessCardUrl: undefined,
      //   cardLogo: undefined,
      //   cardJson: undefined,
      // },
      detailInfo: {},
      dataType: '',
      membershipFeesDisabled: false,
    }
  },
  computed: {},
  created() {},
  methods: {
    openModal(obj) {
      this.type = obj.type
      this.id = obj.data.id

      if (obj.type === 'edit') {
        this.getMemberLevelInfo()
      }

      this.unit = 1
      this.getLevelCardList()
      this.visible = true
    },
    //弹窗完全关闭后的回调
    afterClose() {
      this.$refs.ruleForm.resetFields()
      this.form = { ...initForm }
      this.membershipFeesDisabled = false
    },
    async getLevelCardList() {
      let res = await levelCardList()
      this.level_card_list = res.data || []
    },
    levelCardChange(val) {
      let item = this.level_card_list.find((f) => f.id === val)
      this.form.cardLogo = item ? item.cardLogo : undefined
      this.form.cardJson = item ? item.cardJson : undefined
    },
    //获取第一职务详情
    async getMemberLevelInfo() {
      let res = await memberLevelInfo({ id: this.id })
      this.detailInfo = res.data || {}

      Object.keys(this.form).forEach((k) => {
        this.form[k] = this.detailInfo[k]
      })

      this.form.isShow = this.detailInfo.isShow === 1
      this.membershipFeesDisabled = this.detailInfo.isPremium === 0
    },
    handleUnitChange() {
      this.form.allottedTime = ''
    },
    //是否收费change事件
    handleIsPremiumChange(e) {
      let val = e.target.value
      if (val === 0) this.form.membershipFees = 0
      this.membershipFeesDisabled = val === 0
    },
    changeIsShow(e){
      this.form.memberTypeList = e ? [1, 2] : []
    },
    changeTypeList(e){
      this.form.isShow = (!!e && !!e.length)
    },
    // 发布与编辑内容
    handleSubmit(e) {
      var _this = this
      e.preventDefault()
      this.$refs.ruleForm.validate((err) => {
        if (err) {
          let params = {
            ...this.form,
            isShow: this.form.isShow ? 1 : 0,
            allottedTime: this.form.allottedTime * this.unit
          }
          _this.confirmLoading = true
          if (_this.type === 'add') {
            return typeAdd(params)
              .then((res) => {
                if (res.code === 0) {
                  _this.$message.success('新增成功', 1)
                  _this.visible = false
                  _this.$emit('add')
                } else {
                  _this.$message.error(res.msg)
                }
              })
              .finally(() => {
                _this.confirmLoading = false
              })
          } else {
            return typeEdit(params)
              .then((res) => {
                if (res.code === 0) {
                  _this.$message.success('编辑成功', 1)
                  _this.visible = false
                  _this.$emit('upd')
                } else {
                  _this.$message.error(res.msg)
                }
              })
              .finally(() => {
                _this.confirmLoading = false
              })
          }
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.tree {
  max-height: 400px;
  overflow: auto;
}
/deep/ .ant-modal-footer {
  text-align: center;
}
.viewer-img {
  max-width: 150px;
  max-height: 150px;
  object-fit: contain;
}
</style>
